function Swiper(el){
this.el=document.querySelector(el)
this.imgObj=this.el.querySelector('.img')
this.maskObj=this.el.querySelector('.mask')
this.enlargeObj=this.el.querySelector('.enlarge')
this.arr=this.getStyle(this.enlargeObj,'background-size').split(' ')
this.arrWidth=parseInt(this.arr[0])
this.bili=(this.arrWidth/this.imgObj.clientWidth)
this.liObjs=this.el.querySelectorAll('ul li')
this.init()
}
Swiper.prototype.init=function(){
   this.chuxian()
   this.xiaoshi()
   this.gaibian()
   this.small()
 
}
Swiper.prototype.getStyle=function(duixiang,shuxing){
   if(window.getComputedStyle){
       return getComputedStyle(duixiang)[shuxing]
   }
   else{
          return duixiang.currentStyle[shuxing]
   }

}

Swiper.prototype.chuxian=function(){
    this.imgObj.onmouseover=()=>{
        this.maskObj.style.display=this.enlargeObj.style.display='block'
     }
    
}
 Swiper.prototype.xiaoshi=function(){
    this.imgObj.onmouseout=()=>{
        this.maskObj.style.display=this.enlargeObj.style.display='none'
     }
}
Swiper.prototype.gaibian=function(){
            this.imgObj.onmousemove=(event)=>{
             event=event||window.event
               this.l=event.pageX-this.imgObj.parentNode.offsetLeft-this.maskObj.offsetWidth/2
             
               this.t=event.pageY-this.imgObj.parentNode.offsetTop-this.maskObj.offsetHeight/2
               this.w=parseInt(this.getStyle(this.maskObj,'width'))
               this.h=parseInt(this.getStyle(this.maskObj,'height'))
               if(this.l<0) this.l=0
               if(this.t<0) this.t=0
               if(this.l>(this.imgObj.clientWidth-this.maskObj.offsetWidth))this.l=(this.imgObj.offsetWidth-this.maskObj.offsetWidth)
               if(this.t>(this.imgObj.clientHeight-this.maskObj.offsetHeight))this.t=(this.imgObj.offsetHeight-this.maskObj.offsetHeight)
             this.maskObj.style.left=this.l+'px'
             this.maskObj.style.top=this.t+'px'
             this.enlargeObj.style.width=(this.w*this.bili)+'px'
             this.enlargeObj.style.height=(this.h*this.bili)+'px'
             this.gaibian2()

            }
}
Swiper.prototype.gaibian2=function(){
    this.enlargeObjWidth=parseFloat(this.getStyle(this.enlargeObj,'width'))
    this.maskObjWidth=parseInt(this.getStyle(this.maskObj,'width'))
    this.bili2=this.enlargeObjWidth/this.maskObjWidth
    this.enlargeObj.style.backgroundPosition=`-${this.l*this.bili2}px -${this.t*this.bili2}px`
   
}
Swiper.prototype.small=function(){
    this.liObjs.forEach((item,i)=>{
          item.onclick=()=>{
               this.el.querySelector('ul li.active').className=''
               item.className='active'
               this.imgObj.style.background=`url(./imgs/${i+1}.jpg) no-repeat`
             this.enlargeObj.style.background=`url(./imgs/${i+1}.big.jpg) no-repeat`



          }
    })
}